<template>
  <el-autocomplete
    :input-style="{ backgroundColor: '#000000', color: '#ffffff' }"
    v-model="state"
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    popper-class="my-autocomplete"
    placeholder="请输入歌词,歌名,歌手或专辑"
    @select="handleSelect"
    class="search-box"
  >
    <template #suffix>
      <!-- 清空 -->
      <el-icon v-if="state" class="el-input__icon" @click="handleClear">
        <CircleClose />
      </el-icon>
      <!-- 搜索 -->
      <el-icon class="el-input__icon" @click="handleIconClick">
        <Search />
      </el-icon>
    </template>
    <template #default="{ item }">
      <div class="value">{{ item.value }}</div>
    </template>
  </el-autocomplete>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Search, CircleClose } from '@element-plus/icons-vue'

interface LinkItem {
  value: string
  link: string
}

const state = ref('')
const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb: (results: LinkItem[]) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value
  // call callback function to return suggestion objects
  cb(results)
}
// 过滤函数
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
// 数据仓库
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

// 选择事件处理器
// 当用户点击或按回车选择建议项时触发
// 接收被选中的项目作为参数
const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

// 搜索图标点击事件处理器
const handleIconClick = (ev: Event) => {
  console.log(ev)
}

//清空文本处理器
const handleClear = () => {
  state.value = ''
  // 触发失焦事件，收回搜索建议框
  const inputElement = document.querySelector('.el-autocomplete input') as HTMLInputElement
  if (inputElement) {
    inputElement.blur()
  }
}

onMounted(() => {
  links.value = loadAll()
})
</script>

<style>
/* 搜索推荐下拉框背景 */
.my-autocomplete {
  background-color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 隐藏下拉框上方的白色菱形箭头 */
.my-autocomplete .el-popper__arrow {
  display: none ;
}

.my-autocomplete li {
  line-height: normal;
  padding: 7px;
  background-color: #000000 ;
  color: #666666;
}

/* 当文本内容超出容器宽度时，超出部分会被隐藏
防止文本换行或破坏布局
是实现省略号效果的必要条件 */
.my-autocomplete li .value {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 链接字体大小和颜色 */
.my-autocomplete li .link {
  font-size: 12px;
  color: #0091ff;
}

/* 鼠标悬停效果 */
.my-autocomplete li:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.my-autocomplete li:hover .link {
  color: #ff0000;
}

/* 键盘选中效果 */
.my-autocomplete li.highlighted {
  background-color: #ffffff;
}

.my-autocomplete li.highlighted .link {
  color: #ff0000;
}

/* 图标悬停鼠标变化 */
.el-input__icon {
  cursor: pointer;
  font-size: 18px;
}

/* 搜索和清空图标悬停效果 */
.el-input__icon:hover {
  color: #ffffff ;
}

/* 搜索框组件黑色背景 */
/* 去除边框和阴影 */
/* .search-box {
  background-color: #000000;
} */

.search-box .el-input__wrapper {
  background-color: #000000;
  border: none;
  box-shadow: none;
}

/* 搜索框 placeholder 颜色 */
.search-box ::placeholder {
  color: #666666;
}

/* 搜索框后缀区域鼠标样式 */
.search-box .el-input__suffix {
  cursor: pointer;
}
</style>
